<template>


  <a-card class="table__layout">
    <template #title>
      <div class="table__btn">
        <!-- <a-button type="primary" @click="addOpen">新增</a-button> -->
        <p>
          1. 请使用 vue、ant design vue 搭建一个简易的单页面应用，页面风格样式使用 ant design vue 默
          认风格
        </p>
        <p>2. 在页面中添加一个列表</p>
      </div>
    </template>


    <a-table :dataSource="dataSource" rowKey="id" :columns="columns" :row-selection="{ 
    selectedRowKeys: selectedRowKeys, 
    onChange: onSelectChange }">

      <template #isRequired="{text:item}">
        <span v-if="item">
          是
        </span>
        <span v-else>否</span>
      </template>

      <template #isRequired2="{text:item}">
        <span v-if="item">
          是
        </span>
        <span v-else>否</span>
      </template>

      <template #isRequired3="{text:item}">
        <span v-if="item">
          是
        </span>
        <span v-else>否</span>
      </template>

      <template #operation="item">
        <div class="operation">
          <a @click="defaultEdit(item)">编辑</a>
          <!-- <a-divider type="vertical" /> -->
          <!-- <a class="danger">删除</a> -->
        </div>
      </template>
    </a-table>

  </a-card>


  <!-- 编辑 -->
  <a-modal v-model:visible="visible" v-if="visible" :title="modalType" width="50vw" @ok="handleOk">
    <addModal ref="addModalRef" :currentData="currentData" @closeAddModal="closeAddModal"></addModal>
  </a-modal>

</template>
<script lang="ts">
import addModal from './addModal.vue'

import { useRouter } from 'vue-router'
import { computed, defineComponent, ref, onMounted, provide } from 'vue'
import { editGetData, editData, delData, upload, options } from '@/api/table'
import { log } from 'console'
export default defineComponent({
  name: 'el_table',
  components: {
    addModal
  },
  setup() {

    // 详情
    const router = useRouter()

    // 列表
    const columns = [
      { title: '字段名称', dataIndex: 'userName' },
      { title: '是否必填', dataIndex: 'isRequired', slots: { customRender: 'isRequired' } },
      { title: '字段类型', dataIndex: 'userType' },
      { title: '是否必填', dataIndex: 'isRequired2', slots: { customRender: 'isRequired2' } },
      { title: '字段选项', dataIndex: 'fieldOption' },
      { title: '是否必填', dataIndex: 'isRequired3', slots: { customRender: 'isRequired3' } },
      { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } },
    ]

    // 初始化数据源
    const dataSource = ref<any[]>([{
      id: 0,
      userName: '字段一',
      isRequired: true,

      userType: '单行文本',
      isRequired2: true,

      fieldOption: '无',
      isRequired3: true,
    }, {
      id: 1,
      userName: '字段二',
      isRequired: false,

      userType: '日期',
      isRequired2: false,

      fieldOption: '年-月-日',
      isRequired3: false,
    }, {
      id: 2,
      userName: '字段三',
      isRequired: false,

      userType: '单选下拉',
      isRequired2: false,

      fieldOption: '选项一',
      isRequired3: false,
    }])

    // 单选下拉 添加
    const selectList = ref(['选项一', '选项二']);
    provide('selectList', selectList);

    // 规则
    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
      age: [{ required: true, message: '请输入年龄', trigger: 'change', type: 'number' }],
      addr: [{ required: true, message: '请输入地址', trigger: 'change' }],
      phone: [{ required: true, message: '请输入手机号', trigger: 'change' }],
      industry: [{ required: true, message: '请输入行业', trigger: 'change', type: 'string' }],
      wealth: [{ required: true, message: '请输入净资产', trigger: 'change', type: 'number' }],
      formnet: [{ required: true, message: '请输入表单插槽', trigger: 'change' }]
    }


    // 多选
    const selectedRowKeys = ref<any[]>([])
    const onSelectChange = (keys: []) => {
      // console.log(keys,'keyssss');
      selectedRowKeys.value = keys
    }




    // 点击表单添加按钮 
    // const add = ref(false)
    // const addModal = ref()

    // const addOpen = () => {
    //   console.log('添加弹框打开，无数据')
    // }

    // 表格编辑
    const defaultEdit = (item: any) => {
      console.log('编辑', item);

      selectedRowKeys.value = [item.record.id];  //勾选前面 按钮
      visible.value = true;

      // console.log(currentData.value, 'currentDatacurrentData');
    }

    // 当前行 数据
    const currentData = computed(() => {

      if (selectedRowKeys.value.length == 1 && dataSource.value.length > 1) {
        let index = selectedRowKeys.value[0];
        return dataSource.value[index];
      } else {
        return {};
      }
    })

    // 新增 编辑弹框
    const modalType = '编辑'
    const visible = ref(false)
    const addModalRef = ref<object | any>(null)

    // 编辑确认
    const handleOk = (e: MouseEvent) => {
      // console.log(addModalRef.value,'addModalRef');

      addModalRef.value.onSubmit();
    };

    // 确认后关闭
    const closeAddModal = () => {
      visible.value = false;
    }


    onMounted(() => {
    })

    return {
      columns, dataSource,
      editGetData,
      editData, delData, options,
      rules, selectedRowKeys,
      onSelectChange,
      defaultEdit
      , visible,
      handleOk,
      currentData,
      modalType,
      addModalRef,
      closeAddModal
    }

  }
})
</script>
<style lang="scss" scoped>
pre {
  background-color: #f6f6f6;
  padding: 10px;
  margin: 10px;
  display: block;
}

.table__layout {
  padding: 0;

  & .table__top {
    display: flex;

    .ant-form {
      flex-shrink: 1;
      flex-grow: 1;
    }

    & .table__top_select {
      width: 226px;
      flex-shrink: 0;
      flex-grow: 0;

      & .top_btn {
        margin-left: 10px;
      }
    }
  }

  & .table__btn {
    // display: flex;
  }

  & .operation {
    color: #1890FF;

    & .danger {
      color: #FF4D4F
    }
  }
}
</style>
